var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
(function (factory) {
    if (typeof module === "object" && typeof module.exports === "object") {
        var v = factory(require, exports);
        if (v !== undefined) module.exports = v;
    }
    else if (typeof define === "function" && define.amd) {
        define(["require", "exports", "./item-dialog", "react", "react-dom"], factory);
    }
})(function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    const item_dialog_1 = require("./item-dialog");
    const React = require("react");
    const ReactDOM = require("react-dom");
    function dropdown(options) {
        return __awaiter(this, void 0, void 0, function* () {
            class SelectElement extends React.Component {
                constructor(props) {
                    super(props);
                    this.state = { items: [], value: this.props.value };
                }
                componentDidMount() {
                    return __awaiter(this, void 0, void 0, function* () {
                        let r = yield options.dataSource.executeSelect({});
                        this.setState({ items: r.dataItems });
                        // options.dataSource.inserted.add((sender, item) => {
                        //     let { items } = this.state;
                        //     items.push(item);
                        //     this.setState({ items });
                        //     // this.setState({ items, value: `${item[options.valueField]}` })
                        // })
                        // options.dataSource.updated.add((sender, item) => {
                        //     console.assert(item[options.valueField]);
                        //     let { items } = this.state;
                        //     let o = items.filter(c => c[options.valueField] == item[options.valueField])[0];
                        //     console.assert(o);
                        //     Object.assign(o, item);
                        //     this.setState({ items });
                        // })
                        // options.dataSource.deleted.add((sender, item) => {
                        //     let { items } = this.state;
                        //     items = items.filter(c => c[options.valueField] != item[options.valueField]);
                        //     this.setState({ items });
                        // })
                    });
                }
                render() {
                    let { items, value } = this.state;
                    value = value || "";
                    return React.createElement("select", { name: options.name, className: "form-control", ref: e => {
                            if (!e)
                                return;
                            if (value)
                                e.value = value;
                            e.onchange = () => {
                                if (options.onChanged) {
                                    let item = items.filter(o => `${o[options.valueField]}` == e.value)[0];
                                    options.onChanged(item);
                                }
                            };
                        } },
                        options.emptyText ? React.createElement("option", null, options.emptyText) : null,
                        items.map(o => React.createElement("option", { key: `${o[options.valueField]}`, value: `${o[options.valueField]}`, "data-value-type": typeof o[options.valueField] }, o[options.textField])));
                }
            }
            if (options.addDialog == null) {
                ReactDOM.render(React.createElement(SelectElement, { value: options.value }), options.element);
                return;
            }
            // let element = document.createElement("div");
            options.element.className = "input-group";
            let dropdownDialog;
            let selectElement;
            ReactDOM.render(React.createElement(React.Fragment, null,
                React.createElement(SelectElement, { value: options.value, ref: e => selectElement = e || selectElement }),
                React.createElement("span", { className: "input-group-btn" },
                    React.createElement("button", { className: "btn btn-default", type: "button", onClick: () => dropdownDialog.show(`添加${options.addDialog.label}`, (a) => __awaiter(this, void 0, void 0, function* () {
                            let item = {};
                            item[options.textField] = a.name;
                            let executeResult = yield options.dataSource.insert(item);
                            let items = selectElement.state.items;
                            items.push(item);
                            selectElement.setState({ items, value: `${item[options.valueField]}` });
                            if (options.onChanged) {
                                options.onChanged(item);
                            }
                            Object.assign(item, executeResult);
                        })) },
                        React.createElement("i", { className: "icon-plus" }))),
                React.createElement(DropdownDialog, Object.assign({ ref: e => dropdownDialog = e || dropdownDialog }, options.addDialog))), options.element);
        });
    }
    exports.dropdown = dropdown;
    class DropdownDialog extends item_dialog_1.ItemDialog {
        render() {
            let item = this.state.item;
            return React.createElement("div", { className: "form-horizontal" },
                React.createElement("div", { className: "form-group" },
                    React.createElement("label", { className: "control-label col-sm-2" }, this.props.label),
                    React.createElement("div", { className: "col-sm-10" },
                        React.createElement("input", { name: "sortNumber", className: "form-control", placeholder: this.props.placeholder, value: item.name || "", onChange: e => {
                                item.name = e.target.value;
                                this.setState({ item });
                            } }))));
        }
    }
});
